<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>

<!--
    v-for  使用该指令可以实现列表的渲染
-->
<div id="app">
    <h1>数组的遍历</h1>
    <p v-for="(name,a) in names">{{name}}--{{a}}</p>
    <h1>遍历对象</h1>
    <p v-for="(val,attr) in student">{{val}}--{{attr}}</p>
<!--    遍历数组 数组中存储的是对象-->
    <ul v-for="student in students">
        <li v-for="val in student">{{val}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            names:[
                'tom','jack','lucy'
            ],
            student:{
                name:'tom',
                age:20,
                sex:'男'
            },
            students:[
                {
                    name:'tom1',
                    age:20,
                    sex:'男'
                },
                {
                    name:'tom2',
                    age:20,
                    sex:'男'
                },
                {
                    name:'tom3',
                    age:20,
                    sex:'男'
                }
            ]
        },
        methods:{}
    })
</script>


</body>
</html>
